<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

export default {
  name: 'StatisticsChart',
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      const ctx = document.getElementById('myChart').getContext('2d');
      chartRef.value = new Chart(ctx, {
        type: 'bar', // 图表类型
        data: {
          labels: ['篮球', '羽毛球', '网球', '乒乓球', '足球', '排球', ], // 标签
          datasets: [{
            label: '运动数据统计', // 数据集名称
            data: [12, 19, 6, 5, 8, 14, 1], // 数据值
            backgroundColor: [ // 每个条形的颜色
              'rgba(30,255,224,0.2)',
              // ... 其他颜色
            ],
            borderColor: [ // 边框颜色
              'rgb(15,191,255)',
              // ... 其他颜色
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true // Y轴从0开始
            }
          }
        }
      });
    });

    return { chartRef };
  }
};
</script>
